<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  
  
  <title>前端配置&amp;常见问题 | 个人博客</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="安装 React-devtools1.去git上下载react-devtools文件到本地，下载地址： https:&#x2F;&#x2F;github.com&#x2F;facebook&#x2F;react-devtools ；可以直接下载zip安装包解压，或者通过git clone来将项目拷贝到本地git clone https:&#x2F;&#x2F;github.com&#x2F;facebook&#x2F;react-devtools.git2.进入react-d">
<meta property="og:type" content="article">
<meta property="og:title" content="前端配置&amp;常见问题">
<meta property="og:url" content="https://gitee.com/wieldy/bailment-blog/2023/03/30/%E5%89%8D%E7%AB%AF%E9%85%8D%E7%BD%AE-%E5%B8%B8%E8%A7%81%E9%97%AE%E9%A2%98/index.html">
<meta property="og:site_name" content="个人博客">
<meta property="og:description" content="安装 React-devtools1.去git上下载react-devtools文件到本地，下载地址： https:&#x2F;&#x2F;github.com&#x2F;facebook&#x2F;react-devtools ；可以直接下载zip安装包解压，或者通过git clone来将项目拷贝到本地git clone https:&#x2F;&#x2F;github.com&#x2F;facebook&#x2F;react-devtools.git2.进入react-d">
<meta property="og:locale" content="en_US">
<meta property="article:published_time" content="2023-03-30T02:50:23.000Z">
<meta property="article:modified_time" content="2023-04-23T12:11:43.652Z">
<meta property="article:author" content="John Doe">
<meta name="twitter:card" content="summary">
  
    <link rel="alternate" href="/bailment-blog/atom.xml" title="个人博客" type="application/atom+xml">
  
  
    <link rel="shortcut icon" href="/bailment-blog/favicon.png">
  
  
    
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/typeface-source-code-pro@0.0.71/index.min.css">

  
  
<link rel="stylesheet" href="/bailment-blog/css/style.css">

  
    
<link rel="stylesheet" href="/bailment-blog/fancybox/jquery.fancybox.min.css">

  
<meta name="generator" content="Hexo 6.3.0"></head>

<body>
  <div id="container">
    <div id="wrap">
      <header id="header">
  <div id="banner"></div>
  <div id="header-outer" class="outer">
    <div id="header-title" class="inner">
      <h1 id="logo-wrap">
        <a href="/bailment-blog/" id="logo">个人博客</a>
      </h1>
      
    </div>
    <div id="header-inner" class="inner">
      <nav id="main-nav">
        <a id="main-nav-toggle" class="nav-icon"></a>
        
          <a class="main-nav-link" href="/bailment-blog/">Home</a>
        
          <a class="main-nav-link" href="/bailment-blog/archives">Archives</a>
        
      </nav>
      <nav id="sub-nav">
        
          <a id="nav-rss-link" class="nav-icon" href="/bailment-blog/atom.xml" title="RSS Feed"></a>
        
        <a id="nav-search-btn" class="nav-icon" title="Search"></a>
      </nav>
      <div id="search-form-wrap">
        <form action="//google.com/search" method="get" accept-charset="UTF-8" class="search-form"><input type="search" name="q" class="search-form-input" placeholder="Search"><button type="submit" class="search-form-submit">&#xF002;</button><input type="hidden" name="sitesearch" value="https://gitee.com/wieldy/bailment-blog"></form>
      </div>
    </div>
  </div>
</header>

      <div class="outer">
        <section id="main"><article id="post-前端配置-常见问题" class="h-entry article article-type-post" itemprop="blogPost" itemscope itemtype="https://schema.org/BlogPosting">
  <div class="article-meta">
    <a href="/bailment-blog/2023/03/30/%E5%89%8D%E7%AB%AF%E9%85%8D%E7%BD%AE-%E5%B8%B8%E8%A7%81%E9%97%AE%E9%A2%98/" class="article-date">
  <time class="dt-published" datetime="2023-03-30T02:50:23.000Z" itemprop="datePublished">2023-03-30</time>
</a>
    
  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 class="p-name article-title" itemprop="headline name">
      前端配置&amp;常见问题
    </h1>
  

      </header>
    
    <div class="e-content article-entry" itemprop="articleBody">
      
        <h3 id="安装-React-devtools"><a href="#安装-React-devtools" class="headerlink" title="安装 React-devtools"></a>安装 React-devtools</h3><p>1.去git上下载react-devtools文件到本地，下载地址： <a target="_blank" rel="noopener" href="https://github.com/facebook/react-devtools">https://github.com/facebook/react-devtools</a> ；<br>可以直接下载zip安装包解压，或者通过git clone来将项目拷贝到本地<br>git clone <a target="_blank" rel="noopener" href="https://github.com/facebook/react-devtools.git">https://github.com/facebook/react-devtools.git</a><br>2.进入react-devtools文件夹，用npm安装依赖，这里推荐临时使用淘宝镜像，快速一点。<br>npm –registry <a target="_blank" rel="noopener" href="https://registry.npm.taobao.org/">https://registry.npm.taobao.org</a> install<br>3.安装依赖成功后，我们便可以打包一份扩展程序出来。运行<br>npm run build:extension:chrome<br>4.并且会在你的项目目录中生成一个新的文件夹，react-devtools -&gt; shells -&gt; chrome -&gt; build -&gt; unpacked文件夹<br>5.打开chrome扩展程序chrome:&#x2F;&#x2F;extensions&#x2F;，加载已解压的扩展程序，选择第3步中的生成的unpacked文件夹。这时就会添加一个新的扩展程序react-devtools，并在你的浏览器右上角会有个react标志, 就表示成功啦。</p>
<h3 id="安装-Vue-devtools"><a href="#安装-Vue-devtools" class="headerlink" title="安装 Vue-devtools"></a>安装 Vue-devtools</h3><p>vue-devtools的安装与使用<br>一.在github上下载压缩包，github下载地址：<a target="_blank" rel="noopener" href="https://github.com/vuejs/vue-devtools">https://github.com/vuejs/vue-devtools</a><br>二.解压到本地磁盘<br>三.用你的npm中进入该文件夹下<br>四.依次输:<br>1:npm install （如果在这部报错的话，就改用cnpm install。 cnpm需要安装 安装地址）<br>2:npm run build (这一步一定不要忘了，没有执行这一步的话，项目文件夹shells&gt;chrome文件夹里会少一个src文件夹,如下图)<br>五：修改shells&gt;chrome文件夹下的mainifest.json 中的persistant为true<br>六：我们找到谷歌浏览器的扩展程序功能，勾选开发者模式，然后我们将插件文件夹里的shells&gt;chorme文件夹直接拖到页面中，完成安装。<br>（注意：如果我们没有执行第四部的npm run build，在这里会报错：无法加载背景脚本”build&#x2F;background.js”）<br>七：在插件的目录下执行npm run dev，这个时候我们的插件就可以运行了,打开localhost:8080可以看到插件已经安装并运行了。<br>八：我们在打开本地的其他项目时，就不需要在vue-devtools文件夹下执行npm run dev了，因为这个插件已经安装在浏览器中。接下来就愉快的调试你的vue项目吧。</p>
<h3 id="为什么网站要服务端渲染和客户端渲染？"><a href="#为什么网站要服务端渲染和客户端渲染？" class="headerlink" title="为什么网站要服务端渲染和客户端渲染？"></a>为什么网站要服务端渲染和客户端渲染？</h3><p>服务端渲染和客户端渲染<br>客户端渲染不利于 SEO 搜索引擎优化<br>服务端渲染是可以被爬虫抓取到的,而客户端渲染很难被爬虫抓取到<br>真正的网站即不是纯异步也不是纯服务端渲染出来<br>而是两者结合来做<br>如京东的商品列表就是采用服务端渲染，目的是为了SEO搜索引擎优化<br>而商品评论是为了用户体验,而且也不需要SEO优化,所以才有客户端渲染</p>
<h3 id="npm淘宝镜像"><a href="#npm淘宝镜像" class="headerlink" title="npm淘宝镜像"></a>npm淘宝镜像</h3><p>淘宝 npm 地址： <a target="_blank" rel="noopener" href="http://npm.taobao.org/">http://npm.taobao.org/</a><br>1.临时使用<br>npm –registry <a target="_blank" rel="noopener" href="https://registry.npm.taobao.org/">https://registry.npm.taobao.org</a> install express<br>2.持久使用<br>npm config set registry <a target="_blank" rel="noopener" href="https://registry.npm.taobao.org/">https://registry.npm.taobao.org</a><br>配置后可通过下面方式来验证是否成功<br>npm config get registry 或 npm info express<br>3.通过cnpm使用<br>npm install -g cnpm –registry&#x3D;<a target="_blank" rel="noopener" href="https://registry.npm.taobao.org/">https://registry.npm.taobao.org</a><br>使用 cnpm install express</p>
<h3 id="CommonJS中-module-exports-与-exports"><a href="#CommonJS中-module-exports-与-exports" class="headerlink" title="CommonJS中 module.exports 与 exports"></a>CommonJS中 module.exports 与 exports</h3><p>module.exports &#x3D; {} 导出一个对象<br>var exports &#x3D; module.exports</p>
<p>如果改变了module.exports,但还想使用 exports.xxx 的方法暴露一些东西<br>需要让exports重新指向module.exports<br>module.exports &#x3D; {};<br>exports &#x3D; module.exports;</p>
<p>常见写法：<br>exports &#x3D; module.exports &#x3D; {}</p>
<p>微信小程序<br>文档地址: <a target="_blank" rel="noopener" href="https://developers.weixin.qq.com/">https://developers.weixin.qq.com/</a></p>
<h3 id="使用http-server开启一个本地服务器"><a href="#使用http-server开启一个本地服务器" class="headerlink" title="使用http-server开启一个本地服务器"></a>使用http-server开启一个本地服务器</h3><p>1 下载node.js<br>官网地址： <a target="_blank" rel="noopener" href="https://nodejs.org/">https://nodejs.org</a><br>下载完成后在命令行输入命令$ node -v以及$ npm -v检查版本，确认是否安装成功<br>2 下载http-server<br>在终端输入：<br>$ npm install http-server -g<br>3 开启 http-server服务<br>终端进入目标文件夹，然后在终端输入：</p>
<p>$ http-server -o -c-1 （只输入http-server的话，更新了代码后，页面不会同步更新）<br>(o 为 open的意思)<br>Starting up http-server, serving .&#x2F;<br>Available on:<br><a target="_blank" rel="noopener" href="http://127.0.0.1:8080/">http://127.0.0.1:8080</a><br><a target="_blank" rel="noopener" href="http://192.168.8.196:8080/">http://192.168.8.196:8080</a></p>
<p>Hit CTRL-C to stop the server<br>4 关闭 http-server服务<br>按快捷键CTRL-C</p>
<h3 id="Vue-router-路由"><a href="#Vue-router-路由" class="headerlink" title="Vue-router 路由"></a>Vue-router 路由</h3><p>mode:”hash”;<br>mode:”history”;<br>hash模式和history模式的不同<br>对于vue这类渐进式前端开发框架，为了构建 SPA（单页面应用），需要引入前端路由系统，这也就是 Vue-Router 存在的意义。前端路由的核心，就在于 —— 改变视图的同时不会向后端发出请求。</p>

      
    </div>
    <footer class="article-footer">
      <a data-url="https://gitee.com/wieldy/bailment-blog/2023/03/30/%E5%89%8D%E7%AB%AF%E9%85%8D%E7%BD%AE-%E5%B8%B8%E8%A7%81%E9%97%AE%E9%A2%98/" data-id="cljmgj1f1000szc9jcx0sd7ol" data-title="前端配置&amp;常见问题" class="article-share-link">Share</a>
      
      
      
    </footer>
  </div>
  
    
<nav id="article-nav">
  
    <a href="/bailment-blog/2023/04/20/TypeScript/" id="article-nav-newer" class="article-nav-link-wrap">
      <strong class="article-nav-caption">Newer</strong>
      <div class="article-nav-title">
        
          TypeScript
        
      </div>
    </a>
  
  
    <a href="/bailment-blog/2022/03/29/1.net/" id="article-nav-older" class="article-nav-link-wrap">
      <strong class="article-nav-caption">Older</strong>
      <div class="article-nav-title">1.net</div>
    </a>
  
</nav>

  
</article>


</section>
        
          <aside id="sidebar">
  
    

  
    

  
    
  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Archives</h3>
    <div class="widget">
      <ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="/bailment-blog/archives/2023/07/">July 2023</a></li><li class="archive-list-item"><a class="archive-list-link" href="/bailment-blog/archives/2023/06/">June 2023</a></li><li class="archive-list-item"><a class="archive-list-link" href="/bailment-blog/archives/2023/04/">April 2023</a></li><li class="archive-list-item"><a class="archive-list-link" href="/bailment-blog/archives/2023/03/">March 2023</a></li><li class="archive-list-item"><a class="archive-list-link" href="/bailment-blog/archives/2022/03/">March 2022</a></li></ul>
    </div>
  </div>


  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Recent Posts</h3>
    <div class="widget">
      <ul>
        
          <li>
            <a href="/bailment-blog/2023/07/03/%E5%B7%A5%E4%BD%9C%E6%97%A5%E5%BF%97/">工作日志</a>
          </li>
        
          <li>
            <a href="/bailment-blog/2023/06/29/payMent/">payMent</a>
          </li>
        
          <li>
            <a href="/bailment-blog/2023/06/20/%E7%BD%91%E7%BA%A2%E9%9D%A2%E8%AF%95%E9%A2%98/">原理题</a>
          </li>
        
          <li>
            <a href="/bailment-blog/2023/06/19/%E5%89%8D%E7%AB%AF%E5%A4%A7%E5%B1%8F%E8%87%AA%E9%80%82%E5%BA%94%E6%96%B9%E6%B3%95/">前端大屏自适应方法</a>
          </li>
        
          <li>
            <a href="/bailment-blog/2023/06/17/10%E4%B8%AAJavaScript%E5%B8%B8%E8%A7%81%E9%AB%98%E7%BA%A7%E7%9F%A5%E8%AF%86%E7%82%B9/">10个JavaScript常见高级知识点</a>
          </li>
        
      </ul>
    </div>
  </div>

  
</aside>
        
      </div>
      <footer id="footer">
  
  <div class="outer">
    <div id="footer-info" class="inner">
      
      &copy; 2023 John Doe<br>
      Powered by <a href="https://hexo.io/" target="_blank">Hexo</a>
    </div>
  </div>
</footer>

    </div>
    <nav id="mobile-nav">
  
    <a href="/bailment-blog/" class="mobile-nav-link">Home</a>
  
    <a href="/bailment-blog/archives" class="mobile-nav-link">Archives</a>
  
</nav>
    


<script src="/bailment-blog/js/jquery-3.4.1.min.js"></script>



  
<script src="/bailment-blog/fancybox/jquery.fancybox.min.js"></script>




<script src="/bailment-blog/js/script.js"></script>





  </div>
</body>
</html>